import React from 'react';
import {HashRouter as Router, NavLink, Route, Redirect} from 'react-router-dom';
import Products from './Products.jsx';
import Login from './Login.jsx';
// import {Provider} from 'mobx-react';
import {observer, useObserver} from 'mobx-react';
import UserInfoStore from './store/UserInfoStore.js';
import UserInfo from './UserInfo.jsx';

const MobxDemoApp = () => {
	return useObserver(() => (
		<Router>
			<div className='mobx-app-demo'>
				<div className='navbar'>
					<NavLink exact to={'/'}>首页qweqwge</NavLink>
					<NavLink to={'/products'}>商品列表</NavLink>
					<NavLink to={'/user'}>{UserInfoStore.isLogin ? UserInfoStore.username : '登陆'}</NavLink>
					{UserInfoStore.isLogin ? <NavLink to={'/logout'}>注销</NavLink> : null}
				</div>
				<div className={'main-content'}>
					<Route exact path='/'>
						Home Page
					</Route>
					<Route path={'/products'}>
						<Products/>
					</Route>
					<Route path={'/user'}>
						<UserInfo/>
					</Route>
					<Route path={'/logout'} render={routeProps => {
						UserInfoStore.doLogout();
						return <Redirect to={'/login'}/>;
					}}>

					</Route>
				</div>
			</div>
		</Router>
	));
};


export default MobxDemoApp;